<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref} from 'vue';

import RepoCompCreateDialog from './components/RepoCompCreateDialog.vue';
import RepoCompUploadDialog from './components/RepoCompUploadDialog.vue';
import RepoCompEntityTable from './components/RepoCompEntityTable.vue';
import RepoCompFormHeader from './components/RepoCompFormHeader.vue';

import {RepoCompQueryParam} from "@/api/repo/comp/local/types";
import {ElMessage, ElMessageBox} from "element-plus";
import {
  createCompEntity,
  deleteCompEntity,
  syncCompEntity,
  uploadCompEntity
} from "@/api/repo/comp/local";

const repoCompCreateDialogRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样
const repoCompUploadDialogRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样
const repoCompEntityTableRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样
const repoCompFormHeaderRef = ref<any>(); // 这了的变量名称必须和<deviceDecoder-edit-dialog>的ref值一样

const state = reactive({
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoCompQueryParam,
  editCreateDialog: {
    visible: false,
  },
  editUpdateDialog: {
    visible: false,
  },
  uploadDialog: {
    visible: false,
  },
});


/**
 * 响应查询按钮：页查询数据
 */
function handleQuery(source: string, value: any) {
  state.queryParams = value;
  repoCompEntityTableRef.value.refreshTable(state.queryParams);
}

function handleCreateHide() {
  // 隐藏对话框
  state.editCreateDialog.visible = false;
}

function handleUploadCancel() {
  // 隐藏对话框
  state.uploadDialog.visible = false;
}


function handleCreateDone(value: any) {
  createCompEntity(value).then(() => {
    ElMessage.success('新增成功');

    state.editCreateDialog.visible = false;
    repoCompEntityTableRef.value.refreshTable(state.queryParams);
  })
}

function handleUploadCreate(value: any) {
  uploadCompEntity(value).then(() => {
    ElMessage.success('提交成功');

    state.uploadDialog.visible = false;
    repoCompEntityTableRef.value.refreshTable(state.queryParams);
  })
}

function handleCreateDialog(source: string, type: any) {
  // 创建对话框
  if (source === 'header' && type === 'create') {
    state.editCreateDialog.visible = true;
    repoCompCreateDialogRef.value.initEditData(type, undefined);
    return;
  }
}

function handleDeleteDialog(id: number) {
  ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteCompEntity(id).then(() => {
      ElMessage.success('删除成功');
      // 刷新表单
      repoCompEntityTableRef.value.refreshTable(state.queryParams);
    });
  })
    .catch(() => ElMessage.info('已取消删除'));
}

function handleSyncDialog(row: any) {
  ElMessageBox.confirm('确认同步已选中的数据项?', '提醒', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    syncCompEntity(row).then(() => {
      ElMessage.success('同步成功');
      // 刷新表单
      repoCompEntityTableRef.value.refreshTable(state.queryParams);
    });
  })
    .catch(() => ElMessage.info('已取消同步'));
}

function handleUploadDialog(row: any) {
  state.uploadDialog.visible = true;
  repoCompUploadDialogRef.value.initEditData(row);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});
</script>

<template>
  <div class="app-container">

    <!-- 表单头：各种按钮 -->
    <repo-comp-form-header ref="repoCompFormHeaderRef"
                           @create="handleCreateDialog"
                           @query="handleQuery"
    />

    <!-- 数据表单：创建/修改 -->
    <repo-comp-entity-table ref="repoCompEntityTableRef"
                            @delete="handleDeleteDialog"
                            @sync="handleSyncDialog"
                            @upload="handleUploadDialog"
    />


    <!-- 数据表单：创建/修改 -->
    <repo-comp-create-dialog ref="repoCompCreateDialogRef" v-model:visible="state.editCreateDialog.visible"
                             @cancel="handleCreateHide"
                             @create="handleCreateDone"
    />

    <!-- 数据表单：创建/修改 -->
    <repo-comp-upload-dialog ref="repoCompUploadDialogRef" v-model:visible="state.uploadDialog.visible"
                             @cancel="handleUploadCancel"
                             @create="handleUploadCreate"
    />

  </div>
</template>
